import React from "react";
import { Table, Button, Form, DatePicker, Input } from 'antd';
import {
    getOperateLog
} from '../../../service/api'
import TableLayout from '../../../Layout/TableLayout';
import { withRouter } from 'react-router-dom';


const FormItem = Form.Item;
const { RangePicker } = DatePicker;



class OperateLogForm extends React.Component {

    state = {
        permissions: JSON.parse(localStorage.permissions),
        data: [],
        showData: [],
        loading: true,
        limit: 10,
        offset: 0,
        pagination: {},
        startTime: "",
        endTime: "",
        search: ""
    }

    componentDidMount() {
        this.getData();
    }

    getData = () => {
        let self = this;
        const pagination = { ...this.state.pagination };
        self.setState({ loading: true })
        getOperateLog({
            limit: this.state.limit,
            offset: this.state.offset,
            startTime: this.state.startTime,
            endTime: this.state.endTime,
            search: this.state.search
        }).then(function (data) {
            pagination.total = data.data.total;
            if (data.code === 200) {
                self.setState({ data: data.data.rows, showData: data.data.rows, loading: false, modVisible: false, pagination })
            }
        })

    }




    handleSubmit = (e) => {
        e.preventDefault();
        let self = this;
        this.props.form.validateFields((err, values) => {
            const rangeTimeValue = values['timeRange'];
            if (values.timeRange.length) {
                this.setState({
                    startTime: rangeTimeValue[0].format('YYYY-MM-DD HH:mm'),
                    endTime: rangeTimeValue[1].format('YYYY-MM-DD HH:mm'),
                    search: values.search
                }, () => {
                    self.getData();
                })
            }else{
                this.setState({
                    startTime:"",
                    endTime:"",
                    search: values.search
                }, () => {
                    self.getData();
                })
            }
        })
    }

    handleTableChange = (pagination, filters, sorter) => {
        console.log((pagination.current - 1) * pagination.pageSize + 1)
        this.setState({ loading: true, offset: (pagination.current - 1) * pagination.pageSize + 1 }, function () {
            this.getData();
        })
    }

    render() {
        const { getFieldDecorator } = this.props.form;
        let data = [];
        if (this.state.showData.length) {
            for (let i in this.state.showData) {
                data.push({
                    key: i,
                    id: this.state.showData[i].id,
                    ip: this.state.showData[i].ip,
                    method: this.state.showData[i].method,
                    operation: this.state.showData[i].operation,
                    platform: this.state.showData[i].platform,
                    username: this.state.showData[i].username,
                    params: this.state.showData[i].params,
                    createDateStr: this.state.showData[i].createDateStr
                })
            }
        }

        let columnsRoot = [
            {
                dataIndex: 'id',
                title: 'id',
                width: "80px"
            },
            {
                dataIndex: 'ip',
                title: 'ip',
                width: 120
            },
            {
                dataIndex: 'method',
                title: '方法'
            },
            {
                dataIndex: 'operation',
                title: '操作'
            },

            {
                dataIndex: 'username',
                title: '用户',
                width: 80
            },
            {
                dataIndex: 'platform',
                title: '平台'
            },
            {
                dataIndex: 'params',
                title: '参数'
            },
            {
                dataIndex: 'createDateStr',
                title: '时间',
                width: 110
            }

        ]


        return (
            <TableLayout title="操作日志">
                <Form className="mt10 searchForm" layout="inline" onSubmit={this.handleSubmit}>
                    <FormItem>
                        {getFieldDecorator('timeRange',
                            {
                                initialValue: [],
                                rules: [{ type: 'array' }]
                            }
                        )(
                            <RangePicker placeholder={['开始时间', '结束时间']} format="YYYY-MM-DD HH:mm" />
                        )}
                    </FormItem>
                    <FormItem>
                        {getFieldDecorator('search',{
                            initialValue: ""
                        })(
                            <Input placeholder="搜索用户名" />
                        )}
                    </FormItem>

                    <FormItem>
                        <Button
                            type="primary"
                            htmlType="submit"
                        >
                            搜索
                        </Button>
                    </FormItem>
                </Form>
                <Table className="mt10" columns={columnsRoot} dataSource={data} loading={this.state.loading} pagination={this.state.pagination} onChange={this.handleTableChange} bordered />
            </TableLayout>
        )
    }

}
const OperateLog = withRouter(Form.create()(OperateLogForm));
export default OperateLog;